<script setup lang="ts">
import { useUserStore } from '@/common/stores'
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'
//获取课程数据
import Courses from '@/assets/json/courses.json'
// 讲师数据
import Lecturers from "@/assets/json/lecturers.json";
const courses = ref(Courses.data)
const lecturers = ref(Lecturers.dataList)
// 截取前四个课程
const fourCourses = courses.value.slice(4, 8)
const best = courses.value.slice(0, 1)
const userStore = useUserStore()
let list = reactive([1, 2, 3, 4, 5])
const classOptions = {
  limitMoveNum: 1, //  无缝滚动数据量
  direction: 2, // 滚动方向  左
  classOption: 0.2, // 滚动速度
}

</script>

<template>
  <div>
    <educ-carousel />
    <p class="login" v-show="!userStore.userInfo">
      你当前还未登录，登录后即可解锁更多功能~
    </p>
    <!-- 课程 -->
    <div class="course">
      <h2>助你轻松入门的课程</h2>
      <p>探索来自经验丰富的现实世界专家的课程</p>
      <div class="course-list">
        <template v-for="item in fourCourses" :key="item.id">
          <educ-collect :value="item" />
        </template>
      </div>
    </div>
    <!-- 精选课程 -->
    <div class="hot-course">
      <h2>精选课程</h2>
      <p>许多学习者喜欢这门内容引人入胜的高评分课程。</p>
      <educ-selected-courses :best="best" />
    </div>
    <!-- 热门主题 -->
    <div class="hot-theme">
      <h2>热门主题</h2>
      <ul>
        <li>数据科学</li>
        <li>python</li>
        <li>深度学习</li>
        <li>LangChain</li>
        <li>数据分析</li>
        <li>机器学习</li>
        <li>人工智能</li>
        <li>生成式AI</li>
        <li>区块链</li>
        <li>大数据</li>
      </ul>
    </div>
    <!-- 讲师 -->
    <div class="teacher">
      <h2>受欢迎讲师</h2>
      <p>这些现实世界中的专家得到像你这样的学习者的高度评价。</p>
      <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :data-list="list">
        <educ-introduce-gard :lecturers="lecturers"></educ-introduce-gard>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  text-align: center;
}

.course,
.hot-course,
.hot-theme,
.teacher {
  margin: 1.25rem;
}

.course {
  &-list {
    display: flex;
  }
}

.teacher {
  .scroll-wrap {
    overflow: hidden;
  }
}

.hot-theme {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
  }

  li {
    flex: 0 0 calc((100% - 40px) / 5);
    padding: 0.625rem;
    margin: 4px;
    font-size: 1rem;
    text-align: center;
    background-color: #fff;
  }

  li:hover {
    color: #363636;
    cursor: pointer;
    background-color: #f0f0f0;
  }
}

@media screen and (width <=30rem) {
  .hot-theme li {
    width: 45%;
  }
}
</style>
